<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Visualization: BioHeatMap - A Heatmap for Gene Expression and Other Data</title>


    <!--<script src="http://code.google.com/js/codesite.pack.01312008.js" type="text/javascript"></script>-->
    <link href="http://code.google.com/css/codesite.pack.01312008.css" type="text/css" rel="stylesheet"/>
  
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["table"]});
        google.load("prototype", "1.6");
    </script>
    <script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/trunk/src/main/js/load.js"></script>
    <script type="text/javascript">
        systemsbiology.load("visualization", "1.0", {packages:["bioheatmap"]});
    </script>

    <script type="text/javascript">
        // Set callback to run when API is loaded
        google.setOnLoadCallback(drawVisualization);

        function drawVisualization() {
            // Called once the Visualization API is loaded

            // ------------------------
            // EXAMPLE 1
            // ------------------------
            var data = BioHeatMapExampleData.example1();
            var table;
            var heatmap;

            // Add more data rows and cells here
            heatmap = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer_ex1'));
            heatmap.draw(data, {});

            // draw table
            table = new google.visualization.Table(document.getElementById("tableContainer"));
            table.draw(data,{showRowNumber:false});

            google.visualization.events.addListener(table, 'select', function() {
                heatmap.setSelection(table.getSelection());
            });
            google.visualization.events.addListener(heatmap, 'select', function() {
                table.setSelection(heatmap.getSelection());
            });


            // ------------------------
            // EXAMPLE 2
            // ------------------------
            var heatmap2 = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer_ex2'));
            var data2 = BioHeatMapExampleData.example2();
            heatmap2.draw(data2, {startColor: {r:255, g:0, b:0, a:1},
                                  endColor: {r:255, g:255, b:0, a:1},
                                  passThroughBlack: false,
                                  numberOfColors: 100,
                                  cellWidth: 40,
                                  cellHeight: 40,
                                  useRowLabels: false,
                                  drawBorder: false });


            // ------------------------
            // EXAMPLE 3
            // ------------------------
            var heatmap3 = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer_ex3'));
            var data3 = BioHeatMapExampleData.example3();
            heatmap3.draw(data3, {cellHeight: 10, cellWidth: 10, fontHeight: 7, drawBorder: false});

            // ------------------------
            // EXAMPLE 4
            // ------------------------
            var heatmap4 = new org.systemsbiology.visualization.BioHeatMap(document.getElementById('heatmapContainer_ex4'));
            var data4 = BioHeatMapExampleData.example4();
            heatmap4.draw(data4, {startColor: {r:148, g:0, b:211, a:1},
                                  endColor: {r:255, g:255, b:0, a:1},
                                  mapWidth: 250,
                                  mapHeight: 270,
                                  numberOfColors: 100});


        }

        // methods that return example datatables and display options
        var BioHeatMapExampleData = {

            // ---------------------------------------------------------------
            // Example 1 DATA: small green-black-red heatmap
            // ---------------------------------------------------------------
            example1 : function() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Gene Name');
                data.addColumn('number', 'chip_XXX_XXX_600');
                data.addColumn('number', 'chip2');
                data.addColumn('number', 'chip3');
                data.addColumn('number', 'chip4');
                data.addColumn('number', 'chip5');
                data.addColumn('number', 'chip6');
                data.addRows(4);
                data.setCell(0, 0, 'ATF3');
                data.setCell(0, 1, 0);
                data.setCell(0, 2, 0.5);
                data.setCell(0, 3, 1);
                data.setCell(0, 4, 1.5);
                data.setCell(0, 5, 2);
                data.setCell(0, 6, 2.5);
                data.setCell(1, 0, 'INS');
                data.setCell(1, 1, 3);
                data.setCell(1, 2, 3.5);
                data.setCell(1, 3, 4);
                data.setCell(1, 4, 4.5);
                data.setCell(1, 5, 5);
                data.setCell(1, 6, 5.5);
                data.setCell(2, 0, 'TAP1');
                data.setCell(2, 1, 0);
                data.setCell(2, 2, null);
                data.setCell(2, 3, -1);
                data.setCell(2, 4, -1.5);
                data.setCell(2, 5, -2);
                data.setCell(2, 6, -2.5);
                data.setCell(3, 0, 'IL6');
                data.setCell(3, 1, -3);
                data.setCell(3, 2, -3.5);
                data.setCell(3, 3, -4);
                data.setCell(3, 4, -4.5);
                data.setCell(3, 5, -5);
                data.setCell(3, 6, -5.5);

                return data;
            },

            // ---------------------------------------------------------------
            // Example 2 DATA: single color range
            // ---------------------------------------------------------------
            example2 : function() {
                var data = new google.visualization.DataTable();
                var nCols = 5;
                var nRows = 5;
                for (col = 0; col < nCols; col++) {
                    data.addColumn('number', 'Col' + col);

                }
                var max = 10;
                var min = 0;
                var dataStep = (Math.abs(min) + Math.abs(max))/((nCols)*nRows);
                var value = min;
                for (var i = 0; i < nRows; i++) {
                    data.addRows(1);
                    for (col = 0; col < nCols; col++) {
                        data.setCell(i, col, value);
                        value += dataStep;
                    }
                }

                return data;
            },

            // ---------------------------------------------------------------
            // Example 3 DATA: large random matrix (can use for stress testing)
            // ---------------------------------------------------------------
            example3 : function() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Gene Name');

               var nCols = 50;
               var nRows = 20;
               for (col = 1; col < nCols; col++) {
                   data.addColumn('number', 'Col' + col);

               }
               var max = 10;
               var min = -10;
               for (var i = 0; i < nRows; i++) {
                   data.addRows(1);
                   data.setCell(i, 0, 'Row' + i);
                   for (col = 1; col < nCols; col++) {
                       var value = (Math.random() * (max - min + 1)) + min;
                       data.setCell(i, col, value);
                   }
               }

                return data;
            },


            // ---------------------------------------------------------------
            // Example 4 DATA: continuous data
            // ---------------------------------------------------------------
            example4 : function() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Gene Name');

               var nCols = 10;
               var nRows = 10;
               for (col = 1; col < nCols; col++) {
                   data.addColumn('number', 'Col' + col);

               }
               var max = 10;
               var min = -10;
               var dataStep = (Math.abs(min) + Math.abs(max))/((nCols)*nRows);
               var value = min;

               for (var i = 0; i < nRows; i++) {
                   data.addRows(1);
                   data.setCell(i, 0, 'Row' + i);
                   for (col = 1; col < nCols; col++) {
                       data.setCell(i, col, value);
                       value += dataStep;
                   }
               }
                return data;
            }
        }
    </script>
</head>
<body class="gc-documentation">

<div id="gc-container">
<a name="top"></a>


<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>

<div id="gc-topnav">
    <h1>HeatMap</h1>
    <ul id="docs" class="gc-topnav-tabs">
        <li id="home_link">
            <a href="http://systemsbiology.org/" title="Institute for Systems Biology">Home</a>
        </li>

        <li id="docs_link">
            <a href="http://groups.google.com/group/systemsbiology-visualizations/web/visualizations-summary" class="selected"
               title="Systems Biology Visualizations Documentation">Docs</a>
        </li>

        <li id="faq_link">
            <a href="http://systemsbiology-visualizations.googlegroups.com/web/bioheatmap_examples.html" title="">Examples</a>
        </li>

        <li id="code_link">
            <a href="http://code.google.com/p/systemsbiology-visualizations/" title="Code Repository In Google Code">Code</a>
        </li>

        <li>
            <a href="http://groups.google.com/group/systemsbiology-visualizations" title="Systems Biology Visualization Group">Group</a>
        </li>
    </ul>
</div>
<!-- end gc-topnav -->


<div class="g-section g-tpl-170">

<a name="gc-toc-anchor"></a>

<div class="g-unit g-first" id="gc-toc">
    <ul class="treelist tlw-nested-only tlw-processed tlw-instance-0">
        <li><h2 class="tlw-ignore">Systemsbiology.org Visualizations</h2>

            <ul>

                <li style="padding-top: 0pt; padding-bottom: 0pt;">
                    <div class="tlw-title tlw-branch"><a href="javascript:void(0)" class="tlw-control"
                                                         title=""><img
                            src="docs/cleardot.gif" alt=""
                            class="tlw-control tlw-minus"></a>

                        <h2 class="tlw-expanded">BioHeatMap</h2></div>
                    <ul style="display: block;" id="0-sub-0">
                        <li id="home_link1">
                            <a href="http://groups.google.com/group/systemsbiology-visualizations/web/visualizations-summary" title="">Project Home</a>
                        </li>

                        <li id="docs_link1">
                            <a href="http://systemsbiology-visualizations.googlegroups.com/web/bioheatmap.html" title="" class="selected">Docs</a>
                        </li>

                        <li id="faq_link1">
                            <a href="http://systemsbiology-visualizations.googlegroups.com/web/bioheatmap_examples.html" title="">Examples</a>
                        </li>

                        <li>
                            <a href="http://code.google.com/p/systemsbiology-visualizations/downloads/detail?name=bioheatmap.js" title="">Download</a>
                        </li>

                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div class="line"></div>

</div>

<a name="gc-pagecontent-anchor"></a>

<div style="position: relative;" class="g-unit" id="gc-pagecontent">
<h1 class="page_title">Visualization: BioHeatMap Examples</h1>


    <h1>Example 1</h1>
    <p><b>Microarray gene expression style heatmap with Google Table and eventing</b></p>
    <br/>
    <div id="heatmapContainer_ex1"></div>
    <p><i>Click on the heatmap and see corresponding selection in the table.</i></p>
    <br/>
    <div id="tableContainer"></div>

    <h1>Example 2</h1>
    <p><b>Two color heatmap without row labels</b></p>
    <br/>
    <div id="heatmapContainer_ex2"></div>
    <div id="tableContainer2"></div>

    <h1>Example 3</h1>
    <p><b>Larger random heatmap with small features</b></p>
    <br/>
    <div id="heatmapContainer_ex3"></div>

    <h1>Example 4</h1>
    <p><b>Heatmap size set explicitly, cell size calculated</b></p>
    <br/>
    <div id="heatmapContainer_ex4"></div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


</div>
</div>
</div>
</div>
</body>
</html>